import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit'
import axios from 'axios'

interface ProductDetailState {
	loading: boolean
	error: string | null
	data: any
}

const initialState: ProductDetailState = {
	loading: true,
	error: null,
	data: null,
}

export const getProductDetail = createAsyncThunk(
	'productDetail/getProductDetail',
	async (touristRouteId: string, thunkAPI) => {
		const data = {
			id: 19,
			title:
				'埃及阿斯旺+卢克索+红海Red Sea+开罗+亚历山大12日跟团游(5钻)·【官方旗舰明星纯玩团】25人封顶|含签证小费全程餐|3晚尼罗...',
			description: '[官方旗舰店]埃及阿斯旺+卢克索',
			shortDescription:
				'埃及阿斯旺3天2夜狂欢游玩Sea+开罗+亚历山大12日跟团游(5钻)·【官方旗舰明星纯玩团】25人封顶|含签证小费全程餐|3晚尼罗',
			price: 1199.0,
			coupons: 15,
			points: 18522,
			discount: 8522,
			rating: 3.5,
			pictures: 'https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg',
			features: '<div>这是产品特色区域，因为api无法调用，所以无法展现</div>',
			fees: '<div>这是费用区域，因为api无法调用，所以无法展现</div>',
			notes: '<div>这是预定须知区域，因为api无法调用，所以无法展现</div>',
		}
		return data

		// thunkAPI.dispatch(productDetailSlice.actions.fetchStart())
		// try {
		//   // const { data } = await axios.get(
		//   // 	`http://123.56.149.216:8080/api/touristRoutes/${touristRouteId}`
		//   // )
		//   // console.log(data)
		//   const data = {
		//     id: 19,
		//     title:
		//       '埃及阿斯旺+卢克索+红海Red Sea+开罗+亚历山大12日跟团游(5钻)·【官方旗舰明星纯玩团】25人封顶|含签证小费全程餐|3晚尼罗...',
		//     description: '[官方旗舰店]埃及阿斯旺+卢克索',
		//     shortDescription:
		//       '埃及阿斯旺3天2夜狂欢游玩Sea+开罗+亚历山大12日跟团游(5钻)·【官方旗舰明星纯玩团】25人封顶|含签证小费全程餐|3晚尼罗',
		//     price: 1199.0,
		//     coupons: 15,
		//     points: 18522,
		//     discount: 8522,
		//     rating: 3.5,
		//     pictures: 'https://s3.ax1x.com/2020/12/15/rMQOIJ.jpg',
		//     features:
		//       '<div>这是产品特色区域，因为api无法调用，所以无法展现</div>',
		//     fees: '<div>这是费用区域，因为api无法调用，所以无法展现</div>',
		//     notes: '<div>这是预定须知区域，因为api无法调用，所以无法展现</div>',
		//   }

		//   thunkAPI.dispatch(productDetailSlice.actions.fetchSuccess(data))
		// } catch (error: any) {
		//   thunkAPI.dispatch(productDetailSlice.actions.fetchFail(error.message))
		// }
	}
)

export const productDetailSlice = createSlice({
	name: 'productDetail',
	initialState,
	reducers: {},
	extraReducers: {
		[getProductDetail.pending.type]: (state) => {
			// return {...state, loading: true}
			state.loading = true
		},
		[getProductDetail.fulfilled.type]: (state, action) => {
			state.data = action.payload
			state.loading = false
			state.error = null
		},
		[getProductDetail.rejected.type]: (
			state,
			action: PayloadAction<string | null>
		) => {
			state.loading = false
			state.error = action.payload
		},
	},
})
